import React, { Component } from 'react';
import {
    View,
    Text
} from 'react-native';

import { TabNavigator } from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';

import {
    NAV_ACTIVE_COLOR,
    NAV_INACTIVE_COLOR,
    NAV_BG_COLOR
} from '../common/theme';

import CoursesScreen from './courses/courses';

const HomeScreen = () => (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
);

const MsgScreen = () => (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Msg Screen</Text>
    </View>
);

const SettingScreen = () => (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Setting Screen</Text>
    </View>
);
const tabBarConfig = {
    tabBarPosition: 'bottom',
    backBehavior: 'none',
    swipeEnabled:false,
    animationEnabled:false,
    initialRouteName: 'Courses',
    tabBarOptions: {
        showIcon: true,
        activeTintColor: NAV_ACTIVE_COLOR,
        inactiveTintColor: NAV_INACTIVE_COLOR,
        style:{
            backgroundColor: NAV_BG_COLOR,
            height:60
        },
        indicatorStyle:{
            height:0
        }
    },
    
}

const RootTabs = TabNavigator({
    Home: {
        screen: HomeScreen,
        navigationOptions: {
            tabBarLabel: '主页',
            tabBarIcon: ({ tintColor, focused }) => (
                <Ionicons
                    name={focused ? 'ios-home' : 'ios-home-outline'}
                    size={26}
                    style={{ color: tintColor }} />
            )
        }
    },
    Msg: {
        screen: MsgScreen,
        navigationOptions: {
            tabBarLabel: '消息',
            tabBarIcon: ({ tintColor, focused }) => (
                <Ionicons
                    name={focused ? 'ios-chatbubbles' : 'ios-chatbubbles-outline'}
                    size={26}
                    style={{ color: tintColor }} />
            )
        }
    },
    Courses: {
        screen: CoursesScreen,
        navigationOptions: {
            tabBarLabel: '课表',
            tabBarIcon: ({ tintColor, focused }) => (
                <Ionicons
                    name={focused ? 'ios-apps' : 'ios-apps-outline'}
                    size={26}
                    style={{ color: tintColor }} />
            )
        }
    },
    Setting: {
        screen: SettingScreen,
        navigationOptions: {
            tabBarLabel: '设置',
            tabBarIcon: ({ tintColor, focused }) => (
                <Ionicons
                    name={focused ? 'ios-settings' : 'ios-settings-outline'}
                    size={26}
                    style={{ color: tintColor }} />
            )
        }
    },
},tabBarConfig)

export default RootTabs